<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Wear Gallery LAN Transfer</title>
  <link rel="stylesheet" href="../layui/css/layui.css">

  <style>
    body {
      margin-bottom: 60px;
    }

    #upload {
      display: block
    }

    .container {
      padding-top: 60px;
      margin-left: 10%;
      margin-right: 10%;
    }

    .title {
      font-size: 40px;
    }

    .layui-upload-drag {
      margin-top: 40px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="layui-row layui-col-space15">
        <div class="title">Upload</div>
        <div>Do not close the server window on your watch during upload.</div>
    </div>

    <hr>

    <div class="layui-upload-drag" id="upload">
      <i class="layui-icon"></i>
        <p>Click, or drag picture files here.</p>
    </div>

    <div class="layui-upload-list">
      <table class="layui-table">
        <thead>
          <tr>
              <th>File Name</th>
              <th>Size</th>
              <th>State</th>
          </tr>
        </thead>
        <tbody id="demoList"></tbody>
      </table>
    </div>

    <div style="background-color: #F2F2F2; margin-top: 10%;">
      <div class="layui-card-body" style="color: rgba(119,136,153,0.8);">
          Copyright Ⓒ 2020 <a href="https://github.com/liangchenhe55/wear-gallery/">Wear Gallery</a> All rights
          reserved.
      </div>
    </div>
  </div>

  <script src="../layui/layui.js"></script>
  <script>
    layui.use('upload', function () {
      var $ = layui.jquery
      var upload = layui.upload;
      var demoListView = $('#demoList')

      //执行实例
      var uploadInst = upload.render({
        elem: '#upload' //绑定元素
        , url: '/upload' //上传接口
        , accept: 'images'
        , field: 'image'
        , multiple: true
        , choose: function (obj) {
          //选择文件回调
          obj.preview(function (index, file, result) {
            var tr = $(['<tr id="upload-' + index + '">'
              , '<td>' + file.name + '</td>'
              , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
              , '<td>上传中...</td>'
              , '</tr>'].join(''));

            demoListView.append(tr);
          });
        }
        , before: function (obj) {

        }
        , done: function (res, index, upload) {
          //上传完毕回调
          if (res.code == 0) { //上传成功
            var tr = demoListView.find('tr#upload-' + index)
              , tds = tr.children();
            tds.eq(2).html('<span style="color: #5FB878;">Success</span>');
            return;
          }
          this.error(index, upload);
        }
        , error: function (index, upload) {
          //请求异常回调
          var tr = demoListView.find('tr#upload-' + index)
            , tds = tr.children();
          tds.eq(2).html('<span style="color: #FF5722;">Error</span>');
        }
      });
    });
  </script>
</body>

</html>